<template>
  <div
    class="video"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="disabled"
    :infinite-scroll-distance="10"
    :infinite-scroll-immediate="false"
  >
    <div
      class="videoItem"
      v-for="(item, index) in videomv"
      :key="index"
      @click="clickListCardItem(item.id)"
    >
      <div class="video_img">
        <img :src="item.imgurl || item.cover" alt="" />
        <div class="playcount">
          <i class="iconfont icon-MV"></i>
          {{ item.playCount | handleNum }}
        </div>
        <div class="songtime">
          {{ (item.duration || item.data.durationms) | handleMusicTime }}
        </div>
      </div>
      <div class="title">{{ item.name || item.data.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoList",
  props: {
    videomv: {
      type: Array,
      default() {
        return [];
      },
    },
    isLoad: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      disabled: true,
    };
  },
  methods: {
    clickListCardItem(id) {
      this.$emit("clickListItem", id);
    },
    // 上拉加载事件
    load() {
      this.$emit("videoLoading");
      // 触发load后加载数据 期间不允许再次触发load事件
      this.disabled = true;
    },
  },
  watch: {
    // 数据更新后，再次运行触发load事件
    videomv() {
      if (this.isLoad) {
        if (this.videomv.length != 0) {
          this.disabled = false;
        } else {
          this.disabled = true;
        }
      }
    },
  },
};
</script>

<style lang="less">
.video {
  flex-wrap: wrap;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
.videoItem {
  width: 20%;
  //   background-color: yellowgreen;
  margin: 27px;
}
.videoItem:hover {
  cursor: pointer;
  transition: all 1s;
}
.video_img:hover {
  filter: brightness(80%);
}
.video_img:hover::before {
  content: "\e61e";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "iconfont" !important;
  font-size: 40px;
  color: aliceblue;
}
.video_img {
  position: relative;
  width: 100%;
  height: 150px;
  //   background-color: yellow;
  font-size: 14px;
  color: #666666;
  img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }
  .playcount {
    position: absolute;
    top: 5px;
    right: 10px;
    i {
      color: red;
      font-size: 15px;
    }
  }
  .songtime {
    position: absolute;
    bottom: 5px;
    right: 10px;
  }
  .title {
    font-size: 15px;
    width: 100%;
    color: #666666;
  }
}
</style>